<template>
  <div class="w-full" style="height:2400px">
    <charts class="box"></charts>
    <div v-if="showPage" class="absolute inset-0">
      <div class="flex flex-col">
        <video ref="videoPlayer" width="100%" autoplay loop :src="videoUrl" @play="onPlay" @pause="onPause"
          @ended="onEnded"></video>
        <div class="absolute inset-0">
          <div class="p-5">
            <i :class="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'" style="color:white; font-size:40px;"
              @click="playOrPause"></i>
          </div>
          <div class="flex flex-col justify-center items-center text-white text-3xl font-bold">
            <span class="mb-10">眼前的世界，从此大开眼界</span>
            <el-button style="font-size:15px; border-radius: 20px;" @click="123">进一步了解</el-button>
          </div>
        </div>
      </div>
      <div>
        <el-image class="imagePage" v-for="item, index in fileImages" :key="index" style="width:50%; height:500px;" :src="'https://mamatata1.oss-cn-shanghai.aliyuncs.com/'+item.scr_url"
          fit="cover" lazy @click="imageClick('https://mamatata1.oss-cn-shanghai.aliyuncs.com/'+item.scr_url)"></el-image>
      </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>
<script>
import charts from './common/index.charts.vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { getVideo, getImage } from "/src/views/develop/upload/index.api.js"
export default {
  name: 'VantaBackground',
  components: {
    charts,
  },
  data() {
    return {
      showPage: false,
      videoUrl: "https://mamatata1.oss-cn-shanghai.aliyuncs.com/video/background_page.mp4",
      isPlaying: false,
      player: null,
      fileImages:[],
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  mounted() {
    this.player = this.$refs.videoPlayer;
    gsap.registerPlugin(ScrollTrigger);
    gsap.to(".box", {
      duration: 2,
      opacity: 0,
      y: -100,
      stagger: 0.7,
      delay: 3,
      ease: "back.in",
      onComplete: () => {
        this.showPage = true;
      }
    })
    this.getVideoPage(); // 获取视图上的视频
    this.getImagePage();
  },
  methods: {
    //获取视图上的视频
    getVideoPage() {
      getVideo().then(res => {
        console.log(res);
        if (res.message = "success") {
          this.videoUrl = res.data.video_url
        }
      })
    },
    //获取视图上的视频
    getImagePage() {
      getImage().then(res => {
        console.log(res);
        if (res.message = "success") {
          this.fileImages = res.data.image_url
        }
      })
    },
    //点击图片放大
    imageClick(src) {
      this.dialogVisible = true;
      this.dialogImageUrl = src;
    },
    playOrPause() {
      if (this.isPlaying) {
        this.$refs.videoPlayer.pause();
      } else {
        this.$refs.videoPlayer.play();
      }
    },
    onPlay() {
      console.log("开始播放");
      this.isPlaying = true;
    },
    onPause() {
      console.log("暂停播放");
      this.isPlaying = false;
    },
    onEnded() {
      console.log("播放结束");
      this.isPlaying = false;
    }
  },

};
</script>
<style lang="less" scoped>
.imagePage:hover {
  // /* 变换的样式 */
  // transform: scale(1.1);
  // /* 例如，鼠标悬停时放大图片 */
  // opacity: 1;
  // /* 降低透明度 */
  // transition: transform 1s, opacity 0.3s;
  /* 平滑过渡效果 */
  cursor: pointer;
  /* 鼠标形状改变为手形 */
}
</style>